
<style lang="scss" scoped>
.dialog {
  padding: 10px;
}
</style>

<template>
  <SydDialog
    :title="`${type === 'create' ? '新建' : '编辑'}目录`"
    :visible.sync="showDialog"
    :size="DIALOG_SIZE.LARGE"
    @close="$emit('update:visible', false)"
  >
    <div class="dialog">
      <el-form ref="form" :rules="rules" :model="form" label-width="88px">
        <el-row class="content">
          <el-col :md="24">
            <el-form-item label="父目录" prop="api_pid">
              <el-select
                v-model="form.api_pid"
                style="width:100%"
                placeholder="选择设置父级目录"
              >
                <!-- <el-option label="根目录" value="" /> -->
                <!-- <el-option v-for="item in apiContentsOptions" :key="item.api_id" :style="item.level>1?'ml_15':''" :label="item.api_title" :value="item.api_id" /> -->
                <el-option v-for="item in apiContentsOptions" :key="item.api_id" :value="item.api_id" :label="item.api_title">

                  <div class="J-flexC">
                    <div v-if="item.api_id!==0" style="background:#606266;height:1px;" :style="'width:'+(item.level*15)+'px'" />
                    {{ item.api_title }}
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="24">
            <el-form-item label="目录名称" prop="api_title">
              <el-input v-model="form.api_title" placeholder="请输入目录名称" />
            </el-form-item>
          </el-col>
          <el-col :md="24">
            <el-form-item label="目录描述" prop="api_title">
              <el-input
                v-model="form.api_info"
                type="textarea"
                :rows="6"
                placeholder="请输入目录描述"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <template #footer>
      <div class="" />
      <div class="J-flexC">
        <el-button
          type="text"
          class="c909399"
          @click="showDialog = false"
        >
          关闭
        </el-button>

        <el-button
          type="primary"
          @click="handleSubmit()"
        >确认</el-button>

      </div>
    </template>

  </SydDialog>
</template>

<script>

import SydDialog from '@/components/SydDialog/index.vue'

import { apiContents, apiAdd, apiEdit } from '@/api/api'

export default {
  name: 'AlipayDialog',

  components: {
    SydDialog
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      required: true,
      type: String
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      showDialog: this.visible,
      DIALOG_SIZE: SydDialog.DIALOG_SIZE,
      apiContentsOptions: [], // 目录列表
      form: {
        'interface': 2, // 类型 2目录 1接口
        'api_title': '',
        'api_info': '',
        'api_pid': this.data.api_pid
      },
      rules: {}
    }
  },
  created() {
    this.init()
  },

  methods: {
    async init() {
      //   categoryList().then((res) => {
      //   const data = res.data
      //   const arr = []
      //   for (var i in data) {
      //     arr.push(data[i])
      //     if (data[i].children && data[i].children.length > 0) {
      //       for (var j in data[i].children) {
      //         arr.push(data[i].children[j])
      //       }
      //     }
      //   }
      //   this.categoryList = arr
      // })
      // 目录列表

      apiContents({}).then(res => {
        const data = res.data
        this.recuApiContentsFun([{ api_id: 0, api_title: '根目录', children: data }])
        console.log(this.apiContentsOptions)
      })
    },
    async recuApiContentsFun(data, arr = [], level = 1, is) {
      for (var i in data) {
        data[i].level = is ? level : 1
        arr.push(data[i])

        if (data[i].children && data[i].children.length > 0) {
          var lv = level + 1
          await this.recuApiContentsFun(data[i].children, arr, lv, true)
        }
      }
      this.apiContentsOptions = arr
    },

    handleSubmit(formName) {
      console.log(this.form)
      apiAdd(this.form).then((res) => {
        this.$sydMessage.success(res.msg)
        this.showDialog = false
        this.$emit('reloadList')
      })
    }
  }
}
</script>
